import React,{Children,useState,cloneElement,useCallback} from 'react'
import TabbarItem from './TabbarItem'
import {TabbarWrapper,UlWrapper} from './styledTabbar'
import {useHistory} from 'react-router-dom'
//children就是Tabbar下面的4个组件
function Tabbar({children,bgColor,color,tintColor}) {
    // console.log(children);
    //根据li的索引改变显示不同内容
    const history=useHistory()
    const [currentIndex,setCurrentIndex]=useState(0)
    const handleLiClick=useCallback(
        index => {
            return()=>{
                setCurrentIndex(index)
                if(index===2){
                    history.push('/protect')
                }
            }
        },
    )
    // console.log(children[0].props);
    return (
        <TabbarWrapper>
            <main>
            {/* 根据index显示组件内容 */}
            {children[currentIndex].props.children}
            </main>
            <UlWrapper
            borderWidth='1px 0 0 0'
            bgColor={bgColor}
            color={color}
            tintColor={tintColor}
            >
            { 
                Children.map(children,(children,index)=>{
                    //克隆组件api把要传递的信息粘合在一起传递给子组件
                    return cloneElement(children,{
                        index,
                        currentIndex,
                        onIndex:handleLiClick
                    })
                })
            }

            </UlWrapper>
        </TabbarWrapper>
    )
}

Tabbar.Item=TabbarItem

export default  Tabbar 

// import { Tabs, WhiteSpace } from 'antd-mobile';

// function Tabbar(props){

//   renderContent = tab =>
//     (<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '150px', backgroundColor: '#fff' }}>
//       <p>Content of {tab.title}</p>
//     </div>);

  
//     const tabs = [
//       { title: '1st Tab' },
//       { title: '2nd Tab' },
//       { title: '3rd Tab' },
//       { title: '4th Tab' },
//       { title: '5th Tab' },
//       { title: '6th Tab' },
//       { title: '7th Tab' },
//       { title: '8th Tab' },
//       { title: '9th Tab' },
//     ];

//     return (
//       <div>
//         <WhiteSpace />
//         <Tabs tabs={tabs} renderTabBar={props => <Tabs.DefaultTabBar {...props} page={3} />}>
//           {this.renderContent}
//         </Tabs>
//         <WhiteSpace />
//       </div>
//     );
//   }

//   export default Tabbar